<template>
  <div class="my-container">
    <div class="my-top">
      <div
        class="my-top-box"
        v-if="name"
      >
        <p>
          {{ name }}
          <span>{{ roleName }}</span>
        </p>
        <p>{{ customerName }}</p>
      </div>
    </div>
    <ul class="my-menu-list">
      <li @click="jumpView('messageCenter')">
        <div class="item-left">
          <i class="iconfont iconxiaoxizhongxin2"></i>
          消息中心
        </div>
        <div class="item-right">
          <span
            class="dot"
            v-if="showMsgDot"
          ></span>
          <span v-if="alarmMsgNum">{{ alarmMsgNum }}</span>
          <van-icon name="arrow" />
        </div>
      </li>
      <li @click="jumpView('myBasicInfo')">
        <div class="item-left">
          <i class="iconfont icongerenxinxi"></i>
          基本信息
        </div>
        <div class="item-right">
          <van-icon name="arrow" />
        </div>
      </li>
      <!-- <li>
        <div class="item-left">
          <i class="iconfont iconweixin"></i>
          绑定微信
        </div>
        <div class="item-right">
          <van-icon name="arrow" />
        </div>
      </li> -->
      <li @click="jumpView('feedback')">
        <div class="item-left">
          <i class="iconfont iconfankuijianyi"></i>
          反馈建议
        </div>
        <div class="item-right">
          <van-icon name="arrow" />
        </div>
      </li>
      <li @click="jumpView('aboutUs')">
        <div class="item-left">
          <i class="iconfont iconguanyu"></i>
          关于我们
        </div>
        <div class="item-right">
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserByToken } from '@/api/user.js';

export default {
  name: 'My',
  computed: {
    // 显示消息红点
    showMsgDot() {
      return this.$store.state.messageNum.unread > 0 && this.$store.state.messageNum.alarm === 0;
    },
    // 报警消息条数
    alarmMsgNum() {
      return this.$store.state.messageNum.alarm;
    }
  },
  data() {
    return {
      name: '',
      roleName: '',
      customerName: ''
    };
  },
  created() {
    this.$toast.clear();
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      getUserByToken().then(res => {
        let { name, role_name, customer_name } = res.data;
        this.name = name;
        this.roleName = role_name;
        this.customerName = customer_name;
      });
    },
    // 页面跳转
    jumpView(name) {
      this.$router.push({
        name
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-container {
  width: 100%;
  height: 100%;

  .my-top {
    width: 100%;
    padding: 0.32rem 0.426667rem;

    .my-top-box {
      width: 100%;
      height: 1.92rem;
      padding: 0.32rem;
      border-radius: 0.16rem;
      background: url('../../assets/images/my_top_bg.png') center no-repeat;
      background-size: cover;
      overflow: hidden;

      p {
        color: #fff;

        &:first-of-type {
          display: flex;
          align-items: center;
          margin-bottom: 0.32rem;
          font-size: 0.48rem;

          span {
            margin-left: 0.213333rem;
            padding: 0.053333rem 0.106667rem;
            color: var(--color-primary);
            font-size: 0.32rem;
            background-color: #fff;
            border-radius: 0.053333rem;
          }
        }

        &:last-of-type {
          font-size: 0.32rem;
        }
      }
    }
  }

  .my-menu-list {
    width: 100%;
    padding: 0 0.426667rem;
    background-color: #fff;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 1.226667rem;
      border-bottom: 1px solid var(--border-color);

      &:last-of-type {
        border-bottom: 0;
      }

      .item-left {
        display: flex;
        align-items: center;
        font-size: 0.373333rem;

        i {
          margin-right: 0.213333rem;
          color: var(--color-primary);
        }
      }

      .item-right {
        display: flex;
        align-items: center;

        span {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.16rem;
          padding: 0 0.106667rem;
          font-size: 0.266667rem;
          color: #fff;
          border-radius: 0.4rem;
          background-color: #f15d5d;

          &.dot {
            width: 0.21333rem;
            min-width: 0;
            height: 0.21333rem;
            border-radius: 50%;
            padding: 0;
          }
        }

        .van-icon {
          font-size: 0.373333rem;
          color: #cccccc;
        }
      }
    }
  }
}
</style>